<template>
  <div class="page-container">
    <h3>信息流图表</h3>
    <vab-query-form>
      <vab-query-form-left-panel :span="14">
        <el-form inline :model="queryFormInfo" @submit.prevent>
          <el-form-item label="关键词">
            <el-select
              v-model="queryFormInfo.fields"
              filterable
              placeholder="请下拉搜索关键词"
              clearable
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button :icon="Search" type="primary" @click="fetchDataInfo">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-left-panel>
      <vab-query-form-left-panel :offset="2" :span="8">
        <el-button type="primary" @click="handleTime('info', 1)">
          近7天
        </el-button>
        <el-button type="primary" @click="handleTime('info', 2)">
          近30天
        </el-button>
        <el-button type="primary" @click="handleTime('info', 3)">
          近60天
        </el-button>
        <el-button type="primary" @click="handleTime('info', 4)">
          近一年
        </el-button>
      </vab-query-form-left-panel>
    </vab-query-form>
    <div ref="chartContainer" style="width: 100%; height: 600px"></div>
    <h3>业绩图表</h3>
    <vab-query-form>
      <vab-query-form-left-panel :span="14">
        <el-form inline :model="queryFormPerformance" @submit.prevent>
          <el-form-item label="所属平台">
            <el-select
              v-model="queryFormPerformance.platformId"
              clearable
              @change="handleCheck"
            >
              <el-option
                v-for="item in dictData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="关键词">
            <el-select
              v-model="queryFormPerformance.fields"
              clearable
              filterable
              placeholder="请下拉搜索关键词"
            >
              <el-option
                v-for="item in reportData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              :icon="Search"
              type="primary"
              @click="fetchDataPerformance"
            >
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-left-panel>
      <vab-query-form-left-panel :offset="2" :span="8">
        <el-button type="primary" @click="handleTime('performance', 1)">
          近7天
        </el-button>
        <el-button type="primary" @click="handleTime('performance', 2)">
          近30天
        </el-button>
        <el-button type="primary" @click="handleTime('performance', 3)">
          近60天
        </el-button>
        <el-button type="primary" @click="handleTime('performance', 4)">
          近一年
        </el-button>
      </vab-query-form-left-panel>
    </vab-query-form>
    <div ref="performance" style="width: 100%; height: 600px"></div>
  </div>
</template>

<script>
  // import { getMeAssetInfoList } from '@/api/assetManagement'
  import * as echarts from 'echarts'
  import { Delete, Plus, Search } from '@element-plus/icons-vue'
  import { fetchTopicStatistic } from '@/api/topics'
  import { fetchInFormationFolwStatistic } from '@/api/informationFlow'
  import { fetchDictSelectList } from '@/api/dictionaryManagement'

  export default defineComponent({
    name: 'MyAssetList',
    setup() {
      // const router = useRouter()
      const state = reactive({
        chartContainer: null,
        performance: null,
        queryFormInfo: {
          fields: 'successfulSumPrice',
        },
        queryFormPerformance: {
          platformId: '1',
          fields: 'successfulSumPrice',
        },
        dictData: [],
        InfoLabel: '',
        options: [
          // {
          //   value: 'operateName',
          //   label: '运营人员名称',
          // },
          // {
          //   value: 'customerName',
          //   label: '客服人员名称',
          // },
          // {
          //   value: 'setAccountName',
          //   label: '账号名称',
          // },
          {
            value: 'bookConsumption',
            label: '账面消费',
          },
          {
            value: 'unfold',
            label: '展现',
          },
          {
            value: 'click',
            label: '点击',
          },
          {
            value: 'clickRate',
            label: '点击率',
          },
          {
            value: 'privateOpenNum',
            label: '私信开口量',
          },
          {
            value: 'privateConsultNum',
            label: '私信咨询量',
          },
          {
            value: 'privateNum',
            label: '私信人数',
          },
          {
            value: 'privateOpenTransformRate',
            label: '私信开口转化率',
          },
          {
            value: 'privateOpenCost',
            label: '私信开口成本',
          },
          {
            value: 'privateConsultCost',
            label: '私信咨询成本',
          },
          {
            value: 'realizeConsumption',
            label: '私现消费',
          },
          {
            value: 'registeredGuestCapital',
            label: '登记客资',
          },
          {
            value: 'talkGuestCapital',
            label: '评论客资',
          },
          {
            value: 'registration',
            label: '登记总数',
          },
          {
            value: 'canGuestCapital',
            label: '有效客资',
          },
          {
            value: 'addWechatNum',
            label: '加v数量',
          },
          {
            value: 'addWechatRate',
            label: '加v率',
          },
          {
            value: 'newSuccessfulNum',
            label: '新客成交数',
          },
          {
            value: 'newSuccessfulPrice',
            label: '新客成交额',
          },
          {
            value: 'oldSuccessfulNum',
            label: '老客成单数',
          },
          {
            value: 'oldSuccessfulPrice',
            label: '老客成交额',
          },
          {
            value: 'successfulSum',
            label: '总成交单数',
          },
          {
            value: 'successfulSumPrice',
            label: '总成交额',
          },
          {
            value: 'turnoverRate',
            label: '成交率',
          },
          {
            value: 'roi',
            label: 'roi',
          },
        ],
        reportData: [],
        optionsXHS: [
          {
            value: 'watchTime',
            label: '观看时长',
          },
          {
            value: 'newPraise',
            label: '新增点赞',
          },
          {
            value: 'newReview',
            label: '新增评论',
          },
          {
            value: 'newCollect',
            label: '新增收藏',
          },
          {
            value: 'newNote',
            label: '新增笔记分享',
          },
          {
            value: 'turnoverRate',
            label: '成交率',
          },
          {
            value: 'chalkUp',
            label: '笔记涨粉',
          },
          {
            value: 'frenchFryConsumption',
            label: '薯条消耗',
          },
          {
            value: 'homeVisitNum',
            label: '主页访问',
          },
          {
            value: 'communicationNum',
            label: '私信量',
          },
          {
            value: 'newSuccessfulNum',
            label: '新客成单数',
          },
          {
            value: 'newSuccessfulPrice',
            label: '新客成交额',
          },
          {
            value: 'oldSuccessfulNum',
            label: '老客成单数',
          },
          {
            value: 'oldSuccessfulPrice',
            label: '老客成交额',
          },
          {
            value: 'putSpend',
            label: '投放花费',
          },
          {
            value: 'registration',
            label: '登记总数',
          },
          {
            value: 'canGuestCapital',
            label: '有效客资',
          },
          {
            value: 'addWechatNum',
            label: '加v数量',
          },
          {
            value: 'addWechatRate',
            label: '加v率',
          },
          {
            value: 'newSuccessfulNum',
            label: '新客成交数',
          },
          {
            value: 'newSuccessfulPrice',
            label: '新客成交额',
          },
          {
            value: 'oldSuccessfulNum',
            label: '老客成单数',
          },
          {
            value: 'oldSuccessfulPrice',
            label: '老客成交额',
          },
          {
            value: 'successfulSum',
            label: '总成交单数',
          },
          {
            value: 'successfulSumPrice',
            label: '总成交额',
          },
          {
            value: 'turnoverRate',
            label: '成交率',
          },
          {
            value: 'roi',
            label: 'roi',
          },
        ],
        optionsDZDP: [
          {
            value: 'canGuestCapital',
            label: '有效客资',
          },
          {
            value: 'newSuccessfulNum',
            label: '新客成单数',
          },
          {
            value: 'newSuccessfulPrice',
            label: '新客成交额',
          },
          {
            value: 'oldSuccessfulNum',
            label: '老客成单数',
          },
          {
            value: 'oldSuccessfulPrice',
            label: '老客成交额',
          },
          {
            value: 'successfulSum',
            label: '总成交单数',
          },
          {
            value: 'successfulSumPrice',
            label: '总成交额',
          },
          {
            value: 'exposure',
            label: '曝光量',
          },
          {
            value: 'tapNumber',
            label: '点击数',
          },
          {
            value: 'onlineConsult',
            label: '在线咨询量',
          },
          {
            value: 'phoneNum',
            label: '电话量',
          },
          {
            value: 'addWechatNum',
            label: '加v数量',
          },
          {
            value: 'unableAssets',
            label: '无效客资',
          },
          {
            value: 'selectiveEvaluation',
            label: '精选评价',
          },
        ],
        optionsDT: [
          {
            value: 'newSuccessfulNum',
            label: '新客成单数',
          },
          {
            value: 'newSuccessfulPrice',
            label: '新客成交额',
          },
          {
            value: 'oldSuccessfulNum',
            label: '老客成单数',
          },
          {
            value: 'oldSuccessfulPrice',
            label: '老客成交额',
          },
          {
            value: 'successfulSum',
            label: '总成交单数',
          },
          {
            value: 'successfulSumPrice',
            label: '总成交额',
          },
          {
            value: 'exposure',
            label: '曝光量',
          },
          {
            value: 'tapNumber',
            label: '点击数',
          },
          {
            value: 'onlineConsult',
            label: '在线咨询量',
          },
          {
            value: 'phoneNum',
            label: '电话量',
          },
          {
            value: 'addWechatNum',
            label: '加v数量',
          },
          {
            value: 'unableAssets',
            label: '无效客资',
          },
          {
            value: 'selectiveEvaluation',
            label: '精选评价',
          },
        ],
        optionsQT: [
          {
            value: 'newSuccessfulNum',
            label: '新客成单数',
          },
          {
            value: 'newSuccessfulPrice',
            label: '新客成交额',
          },
          {
            value: 'oldSuccessfulNum',
            label: '老客成单数',
          },
          {
            value: 'oldSuccessfulPrice',
            label: '老客成交额',
          },
          {
            value: 'successfulSum',
            label: '总成交单数',
          },
          {
            value: 'successfulSumPrice',
            label: '总成交额',
          },
        ],
        tempStatus: '',
        InfoTime: [],
        InfoValue: [],
        InfoShow: [],
        PerformanceTime: [],
        PerformanceValue: [],
        PerformanceShow: [],
        PerformanceLabel: '',
      })

      const disabledDate = (time) => {
        return time.getTime() > Date.now()
      }
      /**
       * 业绩统计
       * @returns {Promise<void>}
       */
      const fetchDataPerformance = async () => {
        try {
          state.listLoading = true
          const { data } = await fetchTopicStatistic(state.queryFormPerformance)
          // console.log(data, `${typeof state.queryFormPerformance.timeType}ssss`)
          if (state.queryFormPerformance.timeType === 4) {
            const tempsTime = []
            const tempsInfo = []
            console.log(data, 'sssss')
            data.forEach((item) => {
              tempsTime.push(item.month)
              tempsInfo.push(item.totalData)
            })
            // console.log(tempsTime, tempsInfo, 'ssssx')
            state.PerformanceTime = tempsTime
            state.PerformanceValue = tempsInfo
            state.reportData.forEach((item) => {
              if (item.value === state.queryFormInfo.fields) {
                state.PerformanceLabel = item.label
              }
            })
            state.PerformanceShow[0] = state.PerformanceLabel
            state.PerformanceShow[1] = state.PerformanceLabel
            performanceChar()
            state.listLoading = false
            return
          }
          const tempsTime = []
          const tempsInfo = []
          data.forEach((item) => {
            tempsTime.push(item.createTime)
            tempsInfo.push(item[state.queryFormPerformance.fields])
          })
          state.PerformanceTime = tempsTime
          state.PerformanceValue = tempsInfo
          state.reportData.forEach((item) => {
            if (item.value === state.queryFormInfo.fields) {
              state.PerformanceLabel = item.label
            }
          })
          state.PerformanceShow[0] = state.PerformanceLabel
          state.PerformanceShow[1] = state.PerformanceLabel
          performanceChar()
          state.listLoading = false
        } catch (e) {
          console.log(e)
        }
      }
      /**
       * 信息流
       * @returns {Promise<void>}
       */
      const fetchDataInfo = async () => {
        try {
          state.listLoading = true
          const { data } = await fetchInFormationFolwStatistic(
            state.queryFormInfo
          )
          console.log(data, 'ssss')
          if (state.queryFormInfo.timeType === 4) {
            const tempsTime = []
            const tempsInfo = []
            data.forEach((item) => {
              tempsTime.push(item.month)
              tempsInfo.push(item.totalData)
            })
            state.InfoTime = tempsTime
            state.InfoValue = tempsInfo
            state.options.forEach((item) => {
              if (item.value === state.queryFormInfo.fields) {
                state.InfoLabel = item.label
              }
            })
            state.InfoShow[0] = state.InfoLabel
            state.InfoShow[1] = state.InfoLabel
            initechars()
            state.listLoading = false
            return
          }
          const tempsTime = []
          const tempsInfo = []
          data.forEach((item) => {
            tempsTime.push(item.createTime)
            tempsInfo.push(item[state.queryFormInfo.fields])
          })
          state.InfoTime = tempsTime
          state.InfoValue = tempsInfo
          state.options.forEach((item) => {
            // console.log(item.value,state.queryFormInfo.fields,'state.queryFormInfo.fields');
            if (item.value === state.queryFormInfo.fields) {
              state.InfoLabel = item.label
            }
          })
          state.InfoShow[0] = state.InfoLabel
          state.InfoShow[1] = state.InfoLabel
          initechars()
          state.listLoading = false
        } catch (e) {
          console.log(e)
        }
      }
      const initechars = () => {
        const chartContainer = state['chartContainer']
        // 初始化echarts实例
        const chart = echarts.init(chartContainer)
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999',
              },
            },
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: state.InfoShow,
          },
          xAxis: [
            {
              type: 'category',
              data: state.InfoTime,
              // axisPointer: {
              //   type: 'shadow',
              // },
            },
          ],
          yAxis: [
            {
              type: 'value',
              name: state.InfoLabel,
              axisLabel: {
                formatter: '{value}',
              },
            },
            {
              type: 'value',
              name: state.InfoLabel,
              axisLabel: {
                show: false, // 不显示坐标轴上的文字
              },
              axisLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: state.InfoLabel,
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return `${value} `
                },
              },
              data: state.InfoValue,
              barWidth: '40%',
            },
            {
              name: state.InfoLabel,
              type: 'line',
              yAxisIndex: 1,
              lineStyle: {
                width: 4,
              },
              tooltip: {
                valueFormatter: function (value) {
                  return `${value} `
                },
                trigger: 'none',
              },
              silent: false,
              data: state.InfoValue,
            },
          ],
        }
        chart.setOption(option)
      }
      const performanceChar = () => {
        const chartContainer = state['performance']
        // 初始化echarts实例
        const chart = echarts.init(chartContainer)
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999',
              },
            },
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: state.PerformanceShow,
          },
          xAxis: [
            {
              type: 'category',
              data: state.PerformanceTime,
              // axisPointer: {
              //   type: 'shadow',
              // },
            },
          ],
          yAxis: [
            {
              type: 'value',
              name: state.PerformanceLabel,
              axisLabel: {
                formatter: '{value} ',
              },
            },
            {
              type: 'value',
              name: state.PerformanceLabel,
              axisLabel: {
                show: false, // 不显示坐标轴上的文字
              },
              axisLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: state.PerformanceLabel,
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return `${value} `
                },
              },
              data: state.PerformanceValue,
              barWidth: '40%',
            },
            {
              name: state.PerformanceLabel,
              type: 'line',
              yAxisIndex: 1,
              lineStyle: {
                width: 4,
              },
              tooltip: {
                valueFormatter: function (value) {
                  return `${value} `
                },
                trigger: 'none',
              },
              silent: false,
              data: state.PerformanceValue,
            },
          ],
        }
        chart.setOption(option)
      }
      const handleTime = (type, val) => {
        if (type === 'info') {
          state.queryFormInfo.timeType = val
          fetchDataInfo()
        } else {
          state.queryFormPerformance.timeType = val
          fetchDataPerformance()
        }
      }
      const handleCheck = (val) => {
        state.reportData = []
        state.queryFormPerformance.fields = ''
        // console.log(val,typeof(val), 222)
        switch (val) {
          case '1':
            state.reportData = state.optionsXHS
            return
          case '2':
            state.reportData = state.optionsDZDP
            return
          case '3':
            state.reportData = state.optionsDT
            return
          case '4':
            state.reportData = state.optionsQT
            return
          default:
        }
      }

      const fetchDictLists = async () => {
        const typeCode = {
          typeCode: 'accountType',
        }
        const { data: data } = await fetchDictSelectList(typeCode)
        state.dictData = data
        console.log(state.dictData, 'state.dictData')
      }
      onMounted(() => {
        // fetchData()
        state.queryFormInfo.timeType = 4
        state.queryFormPerformance.timeType = 4
        state.queryFormPerformance.fields = 'successfulSum'
        fetchDataInfo()
        fetchDataPerformance()
        fetchDictLists()
        state.reportData = state.optionsXHS
      })

      return {
        ...toRefs(state),
        fetchDataPerformance,
        fetchDataInfo,
        handleTime,
        handleCheck,
        disabledDate,
        Delete,
        Plus,
        Search,
      }
    },
  })
</script>

<style scoped>
  .toolbar {
    margin-bottom: 4px;
  }
</style>
